<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面的合成图层(Composite layer of the page)</title>
  <!-- 
  在网页渲染过程中，复合层（Composite Layer）是一个重要的概念，它涉及到浏览器如何将不同的视觉元素组合成最终呈现在屏幕上的图像。
  一、复合层的定义
  复合层是浏览器在绘制页面时，为了提高性能和效率而创建的独立层。这些层可以包含不同的元素和样式，浏览器在绘制时会将这些层合并（合成）为最终的视觉效果。

  二、复合层的创建
  1. 条件：
    - 复合层通常在以下情况下创建：
      - 使用了 CSS 的  `transform` 、 `opacity` 、 `filter`  等属性。
      - 使用了  `will-change`  属性来提示浏览器某些元素即将发生变化。
      - 使用了  `position: fixed`  或  `position: sticky`  的元素。
      - 使用了 CSS 动画或过渡效果。

  2. 层的创建过程：
    - 当浏览器检测到需要创建复合层的元素时，它会将这些元素从主渲染树中提取出来，并为它们创建一个新的层。
    - 这些层是独立的，可以单独进行绘制和合成。

  三、复合层的优点
  1. 性能优化：
    - 复合层允许浏览器在处理动画和过渡效果时只重新绘制变化的层，而不是整个页面。这可以显著提高性能，减少重排（Reflow）和重绘（Repaint）的开销。

  2. 流畅的动画：
    - 由于复合层可以独立于其他元素进行处理，浏览器可以更流畅地渲染动画效果，提供更好的用户体验。

  四、合成过程
  1. 绘制：
    - 每个复合层在绘制时会生成自己的图像数据，浏览器会将这些图像数据存储在内存中。
  2. 合成：
    - 在合成阶段，浏览器将所有的复合层合并成一个最终的图像。这个过程通常在 GPU（图形处理单元）中进行，以提高效率和速度。
  3. 输出：
    - 合成后的最终图像被发送到显示设备（如显示器）上进行渲染。

  五、总结
  - 复合层是浏览器在页面渲染过程中创建的独立层，用于提高性能和流畅度，特别是在处理动画和复杂样式时。
  - 复合层的创建条件包括使用特定的 CSS 属性（如  `transform` 、 `opacity`  等）和一些布局特性（如  `fixed`  和  `sticky` ）。
  - 通过复合层，浏览器能够更高效地进行绘制和合成，提供更好的用户体验。

   -->
  <style>
    .transform {
      width: 100px;
      height: 100px;
      background-color: red;
      transform: translateX(100px);
    }

    .opacity {
      width: 100px;
      height: 100px;
      background-color: blue;
      opacity: 0.5;
    }

    .filter {
      width: 100px;
      height: 100px;
      background-color: green;
      filter: blur(5px);
    }

    .will-change {
      width: 100px;
      height: 100px;
      background-color: yellow;
      will-change: transform;
    }

    .fixed {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: fixed;
      top: 100px;
      left: 100px;
    }

    .sticky {
      width: 100px;
      height: 100px;
      background-color: purple;
      position: sticky;
      top: 100px;
    }

    .animation {
      width: 100px;
      height: 100px;
      background-color: orange;
      animation: move 2s infinite;
    }

    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(100px);
      }
    }

    .transition {
      width: 100px;
      height: 100px;
      background-color: black;
      transition: all 2s;
    }

    .transition:hover {
      transform: translateX(100px);
    }

    .box-shadow {
      width: 100px;
      height: 100px;
      background-color: red;
      box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>

  <h3>创建复合层</h3>
  <div class="transform">1. transform</div>
  <div class="opacity">2. opacity</div>
  <div class="filter">3. filter</div>
  <div class="will-change">4. will-change</div>
  <div class="fixed">5. fixed</div>
  <div class="sticky">6. sticky</div>
  <div class="animation">7. animation</div>
  <div class="transition">8. transition</div>
  <div class="box-shadow">9. shadow</div>
  
</body>
</html>